<template>
  <el-container>
    <el-row class="demo-avatar demo-basic">
      <!-- 我的头像 -->
      <el-col :span="12">
        <div class="sub-title"></div>
        <div class="demo-basic--circle">
          <div class="block"><el-avatar :size="250" :src="circleUrl"><img src="../../assets/head.png" alt="还没有"></el-avatar></div>
        </div>
      </el-col> 
      <!-- 我的信息表格，使用v-for循环渲染数据 -->
      <el-col class="infor">
        <el-card class="box-card">
          <div v-for="i in information" :key="i" class="text item">
            {{ i }}
          </div>
        </el-card>
      </el-col>
    </el-row>
    
  </el-container>
</template>


<script>
  export default {
    created(){
      // 在打开页面的时候向后端请求用户信息
      console.log(localStorage.getItem("token"))
      var uurl = '/userId?id=' + localStorage.getItem("id")
      var self = this;
      this.$axios
      .get(uurl,{
        //  params: data,
        headers: {'yl-authorization': localStorage.getItem("token")}//设置header信息
      })
      .then(function (response) {
      // handle success
      console.log(response);
      self.name = response.data.name;
      self.sex = response.data.sex;
      self.name = response.data.name;
      self.name = response.data.name;//!!!!!
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
      .then(function () {
      // always executed
    });
      },
    data () {
      return {
        circleUrl: "../../assets/head.png",
        name: '',
        sex: '',
        age: '',
        tel: '',
        accout: '',
        information :[
          "我的账号: " + localStorage.getItem("id"),
          "我的姓名: 张宇轩",
          "我的性别: 男",
          "我的年龄: 20",
          "我的电话号码: 16602674147",
          "我的账户余额：78"
        ]
      }
    }
  }
</script>

<style>
  .text {
    font-size: 28px;
  }

  .item {
    padding: 18px 10px;
  }

  .box-card {
    width: 480px;
  }

  .infor{
    padding: 18px 0;
  }
</style>